import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Field, reduxForm } from 'redux-form';
import { FormattedMessage, injectIntl } from 'react-intl';
import { TextField, Row, Col, Button, Select, DateRangeWrapper, ButtonGroup } from '@folio/stripes/components';
import DatePerfectChoice from '../../util/DateCustomize/DatePerfectChoice';
import { stripesConnect, IfPermission } from '@folio/stripes/core';
class SearchForm extends Component {
  static propTypes = {
    handleSubmit: PropTypes.func.isRequired,
    initialValues: PropTypes.object,
    dictionary: PropTypes.object,
    cleanSearch: PropTypes.func,
    intl: PropTypes.func,
    ascriptionList:PropTypes.array
  };

  constructor(props, {}) {
    super(props);
  }

    fieldChange = () => {
      const { handleSubmit } = this.props;
      this.setState(() => {
        handleSubmit();
      });
    };

    render() {
      const {
        handleSubmit,
        toModel,
        stripes,
        intl
      } = this.props;
      const getter = (e, value) => {
        return value;
      };

      return (
      
          <form data-test-form-page id="form-search" onSubmit={handleSubmit}>
            <Row style={{ width: '100%' }}>
              <Col xs={2}>
                <Field

                  component={TextField}
                  name="name"
                  placeholder={intl.formatMessage({ id: 'ui-party.loans.columns.party.partyName' })}
                  onBlur={this.fieldChange}

                />
              </Col>
              <Col xs={2}>
                <Field
                  component={Select}
                  name="propertyName"

                  onBlur={this.fieldChange}
                  onClearField={this.fieldChange}
                  dataOptions={this.props.ascriptionList}
                />
              </Col>
              <Col xs={2}>
                <Field

                  component={Select}
                  name="approval"

                  onBlur={this.fieldChange}

                  dataOptions={[
                    {
                      id: '0',
                      value: '',
                      label: intl.formatMessage({ id: 'ui-party.please.select' })+intl.formatMessage({id:'ui-party.loans.columns.party.approvalStatus'})
                    },
                    {
                      id: '1',
                      value: '1',
                      label: intl.formatMessage({ id: 'ui-party.loans.columns.party.approved' })
                    },
                    {
                      id: '2',
                      value: '0',
                      label: intl.formatMessage({ id: 'ui-party.loans.columns.party.unapproved' })
                    },
                    {
                      id: '3',
                      value: '2',
                      label: intl.formatMessage({ id: 'ui-party.loans.columns.party.reject' })
                    }
                  ]}
                />
              </Col>

              <DateRangeWrapper
                initialStartDate="2020-01-01"
                initialEndDate="2099-01-01"
                startValueGetter={getter}
                endValueGetter={getter}
              >
                {({
                  getStartInputProps,
                  getEndInputProps,
                  endDateExclude,
                  startDateExclude,
                }) => (

                  <Col xs={6}>
                    <Row>
                      <Col xs={4}>

                        <Field
                            placeholder={intl.formatMessage({ id: 'ui-party.loans.columns.party.partyStartDate' })}
                          name="partyStartDate"
                          component={DatePerfectChoice}
                          exclude={startDateExclude}
                          dateFormat="YYYY-MM-DD"
                          isClear
                          timeZone="Asia/Shanghai"
                          onRef={this.startDateRef}
                          {...getStartInputProps()}
                        />
                      </Col>

                      <Col xs={4}>
                        <Field

                          name="partyEndDate"
                          placeholder={intl.formatMessage({ id: 'ui-party.loans.columns.party.partyEndDate' })}
                          component={DatePerfectChoice}
                          exclude={endDateExclude}
                          isClear
                          dateFormat="YYYY-MM-DD"
                          onRef={this.endDateRef}
                          timeZone="Asia/Shanghai"
                          {...getEndInputProps()}
                        />
                      </Col>
                      <Col xs={4}>

                        <ButtonGroup>
                          <Button type="submit">
                            <FormattedMessage id="ui-party.search" />
                          </Button>
                          <IfPermission perm="ui-party.info.manage.view.add">
                          <Button onClick={() => {
                            toModel('/party/info/edit')
                          }}
                          >
                            <FormattedMessage id="ui-party.add" />
                          </Button>
                          </IfPermission>
                        </ButtonGroup>

                      </Col>
                    </Row>
                  </Col>

                )
                            }
              </DateRangeWrapper>

            </Row>
          </form>
        
      );
    }
}

export default injectIntl(
  reduxForm({
    form: 'showSearchFrom',
    navigationCheck: true,
    enableReinitialize: true
  })(SearchForm)
);
